<template>
  <div>
    <el-dialog
      :model-value="dialogVisible"
      title="商品选择"
      width="800"
      style="height: 500px"
      :close-on-click-modal="false"
      @close="cls"
    >
      <!--工具栏-->
      <div class="utils">
        <el-button style="margin-left: 20px" @click="choose" type="primary">确定</el-button>
        <el-button @click="cls">取消</el-button>
        <span style="margin-left: 20px">查询条件：</span>
        <el-input style="width: 200px"></el-input>
        <el-button style="margin-left: 20px">查询</el-button>
      </div>

      <!--商品展示-->
      <el-row>
        <el-col :span="6" style=" border: 1px solid #e0e0e0">
          <!--分类树-->
          <el-tree
            style="max-width: 600px"
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
          />


        </el-col>

        <el-col :span="18" style=" border: 1px solid #e0e0e0">
          <!--商品table-->
          <el-table
            :data="tableData"
            stripe
            border
            style=" height: 250px;"
            ref="tableRef"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="55" />
            <el-table-column prop="code" label="商品编码" width="95" />
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="spec" label="规格型号" />
            <el-table-column prop="unit" label="单位" width="95" />
          </el-table>

          <!--分页-->
          <div style="margin-left: 20px">
            <el-pagination
              :page-size="pageSize"
              :page-sizes="[10, 20, 30, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="chg"
              @current-change="chgpg"
            />
          </div>
        </el-col>
      </el-row>

    </el-dialog>
  </div>
</template>

<script setup>
import { queryGoods } from "@/api/set/goods.js";
import { querytree } from "@/api/set/goodsCategory.js";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getUser } from '@/utils/session.js'
//属性

//当前登录的用户信息
let user = {}
//声明属性
const props = defineProps({
  dialogVisible: {
    required: true,
    type: Boolean,
    default: false,
  },
});

//声明事件
const emits = defineEmits(["close","choose"]);
//表格引用
const tableRef = ref(null)
//商品数据
const tableData = ref([]);
//分类树
const data = ref([])
//商品列表查询参数
const categoryCode = ref();
const code = ref();
const name = ref();
//分页参数
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);

//分类树属性
const defaultProps = {
  children: 'children',
  label: 'name',
}

//方法

//关闭
let cls = () => {
  //抛出事件
  emits("close");
};

//每页显示的个数  每页的记录数
let chg = (pgsize) => {
  pageSize.value = pgsize;
  page.value = 1;
  initData();
};
//页数发生变化  第几页
let chgpg = (pg) => {
  page.value = pg;
  initData();
};

//点击分类树节点事件
const handleNodeClick = (data) => {
  categoryCode.value=data.code
  initData()
}

//确定选择
let choose = ()=>{
  let rows = tableRef.value.getSelectionRows();
  if(rows.length==0){
    ElMessage({
      message: "请选择商品！",
      type: "warning"
    });
    return;
  }

  //将选中的商品传递给父组件
  emits("choose",rows)
  //关闭对话框
  cls()
}

//查询分类树
let initTree = async() => {
  let res =await querytree();
  if (res.code == 200) {
    data.value=res.data
    data.value.unshift({name:'全部',code:'10'})
  }
};

//查询商品数据
let initData = async () => {
  //传递的查询参数
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    categoryCode: categoryCode.value,
    code: code.value,
    name: name.value,
    eid: user.eid,
    status: 1,
  };

  let res = await queryGoods(data);

  if (res.code == 200) {
    tableData.value = res.data.list;

    //更新分页参数
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
};

onMounted(async() => {
  user = getUser()
  await initData();
  await initTree()
});
</script>

<style scope>
*{
  padding: 0;
  margin:0
}

.utils {
  border: 1px solid #e0e0e0;
  border-bottom: none;
  height: 80px;
  line-height: 50px;
  box-sizing: border-box;
  /* background-color: #f0f2f5; */
}
</style>
